<script setup lang="ts">
import { DEPLOY_LINK, DEVOPS_LINK, links, ONLINE_USE_LINK, OPEN_JIANMU_DETAIL_LINK } from '@/utils/constants';
import { ref } from 'vue';

// 轮播背景色
const bgColors = ref(['#FFFFFF', '#ECF2F6', '#FBFDFF', '#FBFDFF']);
const curIndex = ref<number>(0);
const handleChange = (index: number) => {
  curIndex.value = index;
};
const redirect = () => {
  window.open('https://www.zhihu.com/zvideo/1549056407118467072', '_blank');
};
</script>
<template>
  <div class="description">
    <el-carousel
      :class="['indicator' + curIndex]"
      @change="handleChange"
      :interval="5000"
      indicator-position="outside"
      arrow="never"
      height="530px"
      pause-on-hover>
      <el-carousel-item>
        <div class="left">
          <div class="jianmu"></div>
          <div class="desc"></div>
          <div class="line"></div>
        </div>
        <div class="right"></div>
        <div class="btns">
          <a :href="DEPLOY_LINK" target="_blank" class="special"><i class="icon"/>如何部署</a>
          <a :href="DEVOPS_LINK" target="_blank" class="secondary" style="margin: 0 30px"> <i class="icon"/>在线体验</a>
          <div class="video-control" @click="redirect"><i class="icon"/>一分钟了解建木</div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="left">
          <div class="banner4-logo"></div>
          <h1 class="title">建木的商业化产品和服务供应商</h1>
          <p class="desc">
            都广科技作为建木开源项目代码贡献度第一的企业贡献者，可以为企业级用户提供优质的商业产品和服务支持
          </p>
        </div>
        <div class="btns">
          <a :href="links.Duguang" target="_blank" class="primary"><i class="icon"></i>了解更多</a>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="left">
          <div class="banner1-logo"></div>
          <h1 class="title">解锁DevOps新体验</h1>
          <div class="desc">为高效研发交付创造∞可能</div>
        </div>
        <div class="right"></div>
        <div class="btns">
          <a :href="DEPLOY_LINK" target="_blank" class="primary"><i class="icon"/>如何部署</a>
          <a :href="ONLINE_USE_LINK" target="_blank" class="secondary" style="margin-left: 30px"><i class="icon"/>在线体验</a>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="left">
          <div class="banner3-logo"></div>
          <h1 class="title">建木完成木兰开源社区捐赠</h1>
          <p>
            建木与木兰开源社区完成捐赠协议签署并进行了产权交接
          </p>
          <p class="desc">
            完成捐赠后，木兰开源社区将为建木提供中立托管服务，保证建木的持续发展不受第三方影响，通过更加开放的方式打造和完善建木社区生态
          </p>
        </div>
        <div class="right"></div>
        <div class="btns">
          <a :href="OPEN_JIANMU_DETAIL_LINK" target="_blank" class="primary"><i class="icon"/>了解更多</a>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<style lang="less" scoped>
.description {
  box-sizing: border-box;
  border-bottom: 1px solid #F5FAFF;

  ::v-deep(.el-carousel) {
    position: relative;
    transition: background-color 0.4s ease-in;
    background-color: v-bind(bgColors [curIndex]);

    .el-carousel__container {
      max-width: 1600px;
      margin: 0 auto;

      .el-carousel__item {

        .btns {
          position: absolute;
          bottom: 130px;
          left: 42px;
          display: flex;
          align-items: center;

          a {
            cursor: pointer;
            width: 144px;
            height: 44px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border-radius: 4px;
            justify-content: center;

            .icon {
              width: 20px;
              height: 20px;
              margin-right: 8px;
            }

            &.special {
              color: #FFFFFF;
              background-color: #042749;

              &:hover {
                background-color: #123757;
              }

              .icon {
                background: url("@/assets/web/svgs/btn-icon-1.svg") no-repeat;
                background-size: 100%;
              }
            }

            &.primary {
              color: #FFFFFF;
              background-color: #096DD9;

              &:hover {
                background-color: #2E8DE6;
              }

              .icon {
                background: url("@/assets/web/svgs/btn-icon-3.svg") no-repeat;
                background-size: 100%;
              }
            }

            &.secondary {
              color: #042749;
              border: 1px solid #DFE7EE;
              background-color: #FFFFFF;

              &:hover {
                border: 1px solid #096DD9;
                color: #096DD9;

                .icon {
                  background: url("@/assets/web/svgs/btn-icon-2-hover.svg") no-repeat;
                  background-size: 100%;
                }
              }

              .icon {
                background: url("@/assets/web/svgs/btn-icon-2.svg") no-repeat;
                background-size: 100%;
              }
            }
          }

          .video-control {
            cursor: pointer;
            display: flex;
            align-items: center;
            color: #096DD9;

            .icon {
              margin-right: 8px;
              width: 20px;
              height: 20px;
              background: url("@/assets/web/svgs/video.svg") no-repeat;
              background-size: 100%;
            }

            &:hover {
              color: #2E8DE6;

              .icon {
                background: url("@/assets/web/svgs/video-hover.svg") no-repeat;
                background-size: 100%;
              }
            }
          }
        }

        &:nth-child(1) {
          background: url("@/assets/web/pngs/banner-1.png") no-repeat;
          background-size: cover;

          .left {
            position: absolute;
            top: 72px;
            left: 42px;

            .jianmu {
              width: 132px;
              height: 123px;
              background: url("@/assets/web/svgs/jianmu.svg") no-repeat 100%;
            }

            .desc {
              margin: 30px 0 16px;
              width: 515px;
              height: 45px;
              background: url("@/assets/web/svgs/jianmu-description.svg") no-repeat 100%;
            }

            .line {
              width: 112px;
              height: 56px;
              background: url("@/assets/web/pngs/line.png") no-repeat 100%;
            }
          }

          .right {
            position: absolute;
            top: 72px;
            right: 103px;
            width: 350px;
            height: 331px;
            background: url("@/assets/web/svgs/description.svg") 100% no-repeat;
          }
        }

        &:nth-child(2) {
          background: url("@/assets/web/pngs/banner-2.png") no-repeat;
          background-size: cover;
          display: flex;

          .left {
            position: absolute;
            top: 72px;
            left: 42px;
            display: flex;
            flex-direction: column;
            font-weight: 400;
            color: #012C53;

            .banner4-logo {
              width: 144px;
              height: 48px;
              background: url("@/assets/web/svgs/banner4-logo.svg") 100% no-repeat;
            }

            .title {
              margin: 30px 0 16px;
              font-weight: 600;
            }

            .desc {
              width: 588px;
              line-height: 22px;
              font-size: 16px;
            }
          }
        }

        &:nth-child(3) {
          background-color: #FBFDFF;
          background-size: cover;

          .btns {
            .primary {
              .icon {
                background: url("@/assets/web/svgs/btn-icon-1.svg") no-repeat;
                background-size: 100%;
              }
            }
          }

          .left {
            position: absolute;
            top: 72px;
            left: 42px;

            .banner1-logo {
              width: 318px;
              height: 46px;
              background: url("@/assets/web/svgs/banner1-logo.svg") 100% no-repeat;
            }

            h1 {
              margin: 30px 0 16px;
              font-weight: 600;
              font-size: 32px;
              line-height: 45px;
              color: #012C53;
            }

            .desc {
              font-weight: 400;
              font-size: 16px;
              line-height: 22px;
              letter-spacing: 8px;
              color: #042749;
            }
          }

          .right {
            position: absolute;
            top: 138px;
            right: 128px;
            width: 546px;
            height: 264px;
            background: url("@/assets/web/svgs/banner1-material.svg") 100% no-repeat;
          }
        }

        &:nth-child(4) {
          background: url("@/assets/web/pngs/banner-4.png") no-repeat;
          background-size: cover;
          display: flex;

          .left {
            position: absolute;
            top: 72px;
            left: 42px;
            display: flex;
            flex-direction: column;
            font-weight: 400;
            color: #012C53;

            .banner3-logo {
              width: 274px;
              height: 44px;
              background: url("@/assets/web/svgs/banner3-logo.svg") 100% no-repeat;
            }

            .title {
              margin: 18px 0 16px;
              font-weight: 600;
            }

            p {
              font-size: 20px;
            }

            .desc {
              width: 500px;
              margin: 12px 0 0;
              font-size: 16px;
              line-height: 32px;
            }
          }

          .right {
            position: absolute;
            top: 32px;
            right: 0;
            width: 560px;
            height: 448px;
            background: url("@/assets/web/svgs/banner3-material.svg") 100% no-repeat;
          }
        }
      }
    }

    .el-carousel__indicators {
      position: absolute;
      bottom: 20px;
      transform: translateX(-50%);

      .el-carousel__indicator {

        &.is-active {
          .el-carousel__button {
            background-color: #042749;
          }
        }

        .el-carousel__button {
          margin-right: 20px;
          opacity: 1;
          height: 6px;
          width: 40px;
          border-radius: 3px;
          background-color: #d8d8d8;
        }
      }
    }
  }
}
</style>
